import './SetAdminTheme.scss'
import { useState } from 'react'
import { App } from 'antd'
import { useEventEmitter, useMount } from 'ahooks'

import { Http } from '../../Utils/Api'
import { FormTempMapping } from '../../Utils/FormTemp'
import { FlowThemeFormMapping } from '../../Config/FlowConfig'
import { Encrypt, GetIndexedDB, PutIndexedDB } from '../../Utils/IndexedDB'


import { themeStore } from '../../Config/zustand'

const SetAdminTheme = ({ data }) => {
    const { notification } = App.useApp()
    const { type: themeType } = data

    const { updateTheme, updateLogo, updateMenu, updateHead, updateBody } = themeStore()
    const [Theme, setTheme] = useState()


    const getData = async () => {
        const project = await GetIndexedDB('project')
        setTheme(project)
    }

    useMount(getData)

    const themeTypeMapping = {
        FlowThemeConfig: { property: 'theme', updateFunction: updateTheme },
        FlowThemeLogoBack: { property: 'logo', updateFunction: updateLogo },
        FlowThemeLogoImage: { property: 'logo', updateFunction: updateLogo },
        FlowThemeLogoContent: { property: 'logo', updateFunction: updateLogo },
        FlowThemeMenuBack: { property: 'menu', updateFunction: updateMenu },
        FlowThemeMenuIcon: { property: 'menu', updateFunction: updateMenu },
        FlowThemeMenuText: { property: 'menu', updateFunction: updateMenu },
        FlowThemeHeadBack: { property: 'head', updateFunction: updateHead },
        FlowThemeHeadTitle: { property: 'head', updateFunction: updateHead },
        FlowThemeHeadOptions: { property: 'head', updateFunction: updateHead },
        FlowThemeHeadUserInfo: { property: 'head', updateFunction: updateHead },
        FlowThemeBodyBack: { property: 'body', updateFunction: updateBody },
        FlowThemeBodyTabs: { property: 'body', updateFunction: updateBody },
    }

    const ThemeEvent = useEventEmitter()
    ThemeEvent.useSubscription(async val => {
        const { type, data } = val
        if (type === 'onFormBack') {
            const themeConfig = themeTypeMapping[themeType];
            if (themeConfig) {
                const { property, updateFunction } = themeConfig
                const newData = { ...Theme[property], ...data }
                const params = JSON.stringify(await Encrypt({ ...structuredClone(Theme), [property]: newData }))
                try {
                    onPostJson(params);
                    updateFunction(newData);
                    await PutIndexedDB('project', { ...structuredClone(Theme), [property]: newData });
                    ThemeEvent.emit({ type: 'closeFormLoading' });
                    notification.success({ key: 'theme', message: '主题保存成功!' });
                } catch (err) {
                    notification.error({ key: 'theme', message: '主题保存失败!' });
                }
            }
        }
    })

    const onPostJson = async (data) => {
        return await Http({ method: 'post', url: 'dictionary/SaveJsonInfoByUuid', params: { uuid: 'THEME/THEMEJSON', content: data } })
    }

    if (Theme && themeTypeMapping[themeType]) {
        const initialProp = themeTypeMapping[themeType].property;
        return (
            <div className='SetAdminTheme'>
                <FormTempMapping formItem={FlowThemeFormMapping[themeType]} FORMEVENT={ThemeEvent} Initial={Theme[initialProp]} />
            </div>
        );
    }
}

export default SetAdminTheme;